<template>
  <div class="outer">
    <van-sticky>
      <van-nav-bar title="我的收藏"  left-arrow  @click-left="()=>{$router.push('/home/me/index')}"  />
    </van-sticky>
    <div>
      <ListItem
        :item="{
          image:
            'https://cdn7.axureshop.com/demo/2090757/images/%E7%81%B5%E6%84%9F%E5%90%88%E9%9B%86/u283.png',
          small_title: '2室·1厅·1卫·110㎡·北欧',
          title: '111平北欧混搭新中式，被日湖花园迷住了',
          uPic: 'https://cdn7.axureshop.com/demo/2090757/images/%E9%A6%96%E9%A1%B5/u122.png',
          name: 'Amone',
          sc: 43,
        }"
      />
    </div>
    <div style="height: 60px"></div>
  </div>
</template>

<script>
import ListItem from "@/components/ListItem.vue";
export default {
  components: {
    ListItem,
  },
};
</script>

<style lang="scss" scoped>
 #main {
    padding: 0px 20px;

    >h3 {
      text-align: left;
      margin-bottom: 15px;
      user-select: none;
    }

    >.view {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      // border: 1px solid red;

      >.single {
        display: flex;
        flex-direction: column;
        align-items: start;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, .2);
        width: calc((100% - 10px) / 2);
        margin: 0 10px 20px 0;
        height: max-content;
        overflow: hidden;
        border-radius: 12px;

        // 瀑布流布局：必须用绝对定位才能随意调整位置！ 相对与View
        position: absolute;

        &:nth-child(2n) {
          margin-right: 0;
        }

        >.cover {
          width: 100%;
          height: auto;
          max-height: 250px;
          overflow: hidden;

          >img {
            width: 100%;
            height: auto;
            display: inline-block;
          }
        }

        >p {
          font: normal 600 14px sans-serif;
          white-space: normal;
          padding: 10px 6px 0;
          color: #333;
        }

        >.single-footer {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px 8px;

          >.left {
            display: flex;
            align-items: center;

            >.head_icon {
              width: 24px;
              height: 24px;
              overflow: hidden;
              border-radius: 100px;
              margin-right: 5px;

              >img {
                width: 100%;
                height: auto;
              }
            }

            >span {
              font: normal 400 12px sans-serif;
              color: #666;
              width: 60%;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          >span {
            font: normal 200 12px sans-serif;
            color: #666;
          }
        }
      }
    }
  }

</style>
